<template>
  <div class="top">
    <el-input placeholder="请输入地址" clearable v-model="state.params.idorname" @clear="list" style="width:200px" />
    <el-button style="margin-left:10px" type="primary" @click="list">查询</el-button>
    <el-button type="success" @click="add">添加</el-button>
    <el-button type="danger" @click="bigdel">批量删除</el-button>
  </div>
  <!-- 表格 -->
  <div class="table">
    <el-table :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" ref="multipleTableRef" @selection-change="handleSelectionChange" :data="state.tableData" border
      style="width: 100%">
      <el-table-column type="selection" />
      <el-table-column property="name" label="地址" />

      <el-table-column label="Operations">
        <template #default="scope">
          <!-- 按钮 -->
          <el-button  type="primary" @click="dialogTableVisible = true" size="small" plain>生成二维码</el-button>
          <!--弹出框  -->
          <el-dialog v-model="dialogTableVisible">
            <!-- 二维码 -->
            <div >
              <vueQr ref="qrcode" :text="qrCodeValue" logo-src="http://127.0.0.1:5173/down/log.jpg" :size="250"></vueQr>
              <div>
                <el-button  @click="download" type="success">下载二维码</el-button>
              </div>
            </div>
          </el-dialog>
            <!-- 按钮 -->
          <el-button type="success" style="margin-left: 20px;" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" style="margin-left: 20px;" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

  </div>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
      :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="state.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "@vue/reactivity";
import { ElMessage, ElMessageBox } from "element-plus";
import { addresslist, addressdel } from "../../api/address";
import { useRouter } from "vue-router";
import vueQr from 'vue-qr/src/packages/vue-qr.vue';

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '160px'
const router = useRouter();
const state = reactive<any>({
  //数组
  ids: [],
  name: "",
  id: "",
  tableData: [],
  total: 0,
  params: { page: 1, pageSize: 10, idorname: "" },
});
//添加
const add = () => {
  router.push("./addressadd");
};
//修改
const handleEdit = async (index: number, row: any) => {
  let obj = JSON.stringify(row); //将数据通过JSON.stringify处理后赋给obj
  router.push({
    path: "./addressupdata",
    query: { row: obj },
  });
};
// 列表
const getlists = async () => {
  let res: any = await addresslist(state.params);
  state.total = res.data.total;
  if (res.code == 10000) {
    state.tableData = res.data.list;
  } else {
    ElMessage.error("获取列表失败");
  }
};
getlists();
// 分页
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  state.params.pageSize = val;
  getlists();
};
const handleCurrentChange = (val: number) => {
  state.params.page = val;
  getlists();
};
//查询
const list = () => {
  getlists();
};
//复选框的默认事件 遍历 取到id
const handleSelectionChange = (val: any) => {
  console.log(val);
  state.ids = val.map((item: { id: any; }) => item.id)
  console.log(state.ids);
}

//删除
const handleDelete = async (index: number, row: any) => {
  ElMessageBox.confirm("确定删除这条数据据嘛?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res: any = await addressdel(row.id);
      if (res.code == 10000) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getlists();
      } else {
        ElMessage({
          type: "info",
          message: "Delete canceled",
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已经取消",
      });
    });
  // }
};
//批量删除

const bigdel = async (index: number, row: any) => {
  ElMessageBox.confirm("确定删除您所选中的据嘛?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res: any = await addressdel((state.ids).join())

      if (res.code == 10000) {
        ElMessage({
          type: "success",
          message: "批量删除成功",
        });
        getlists();
      } else {
        ElMessage({
          type: "info",
          message: "Delete canceled",
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已经取消",
      });
    });
  // }
};
//二回码
const outerVisible = ref(false)
const innerVisible = ref(false)
const qrCodeValue = ref('http://visitor.lening365.cn/h5/index.html?id=undefined#/'); //二维码内容
const qrcode: any = ref<typeof vueQr>(); // 实例
const download = () => {
  // TODO 接口返回数据  
  let res = "112233"
  // 数据返回生产二维码
  qrCodeValue.value = res;
  // 生成二维码是属于异步行为，所以下载二维码也为异步行为
  const timer = setTimeout(() => {
    // 可打印获取二维码插件里的数据
    console.log('data', qrcode.value);
    console.log('下载签到码', qrcode.value.imgUrl);

    // 下载
    // 注，当在vue3+ts项目中，识别不了document是，前面加上window

    const eleLink = window.document.createElement('a');
    eleLink.style.display = 'none';
    eleLink.download = '二维码';
    eleLink.href = qrcode.value.imgUrl;
    eleLink.click();
    eleLink.remove();
    clearTimeout(timer);
  });
}

</script>

<style lang="less" scoped>
.top {
  margin: 20px;

}

.table {
  margin-left: 20px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

:deep(.el-overlay) {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background: #cccccc0d !important;
  overflow: auto;
}

:deep(div#el-id-5312-19) {
  margin-left: 100px;
}

:deep(.el-dialog) {
  --el-dialog-width: 25%;
  --el-dialog-margin-top: 15vh;
  --el-dialog-bg-color: var(--el-bg-color);
  --el-dialog-box-shadow: var(--el-box-shadow);
  --el-dialog-title-font-size: var(--el-font-size-large);
  --el-dialog-content-font-size: 14px;
  --el-dialog-font-line-height: var(--el-font-line-height-primary);
  --el-dialog-padding-primary: 20px;
  --el-dialog-border-radius: var(--el-border-radius-small);
  position: relative;
  margin: var(--el-dialog-margin-top, 15vh) auto 0px;
  background: var(--el-dialog-bg-color);
  border-radius: var(--el-dialog-border-radius);
  box-shadow: var(--el-dialog-bg-color);
  box-sizing: border-box;
  width: var(--el-dialog-width, 50%);
}
.demo-pagination-block{
  margin-left: 20px;
}
.el-pagination{
  float: right;
  margin-top: 20px;
}
</style>